<!--<!DOCTYPE html>-->
<!--<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:fmt="http://www.w3.org/1999/xhtml">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->

<!--</head>-->
<!--<body>-->
<!--<div th:replace="common/top"/>-->

<!--<section class="pricing" style="height: 900px">-->

<!--    <div class="col-ten pricing-table">-->
<!--        <div class="row">-->
<!--            <div class="col-eleven plan-wrap">-->
<!--                <div class="plan-block primary" data-aos="fade-up">-->

<!--                    <div class="plan-top-part">-->
<!--                        <p class="plan-block-price"><h2 th:text="${items.get(0).product.name}">hhh</h2></p>-->
<!--                    </div>-->

<!--                    <div class="plan-bottom-part">-->
<!--                        <table bgcolor="black">-->
<!--                            <tr>-->
<!--                                <th>Item ID</th>-->
<!--                                <th>Product ID</th>-->
<!--                                <th>Description</th>-->
<!--                                <th>List Price</th>-->
<!--                                <th>&nbsp;${sessionScope.qty}</th>-->
<!--                            </tr>-->
<!--                            <tr th:each="item:${items}">-->
<!--                                <td> <a th:href="@{'/catalog/viewItem'(itemId=${item.itemId})}"  th:text="${item.itemId}" ></a></td>-->
<!--                                <td th:text="${item.product.productId}"></td>-->
<!--                                <td th:text="${item.product.name}"></td>-->
<!--                                <td th:text="${item.listPrice}"></td>-->

<!--                                <td><a th:href="@{'/cart/addItemToCart'(itemId=${item.itemId})}">Add to Cart</a></td>-->

<!--                            </tr>-->
<!--                            <tr>-->
<!--                                <td>-->
<!--                                </td>-->
<!--                            </tr>-->
<!--                        </table>-->
<!--                    </div>-->


<!--                    &lt;!&ndash; end home-social-list &ndash;&gt;-->

<!--                    <div class="home-scrolldown" ><div class="scroll-icon smoothscroll">-->
<!--                        <a th:href="@{/catalog/viewCategory(categoryId=${product.categoryId})}"-->
<!--                            th:text="'&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;Return to '+${product.categoryId}">Return to Product-->
<!--                        </a>-->
<!--                    </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div> &lt;!&ndash; end plan-wrap &ndash;&gt;-->

<!--        </div>-->

<!--    </div> &lt;!&ndash; end pricing-table &ndash;&gt;-->
<!--    &lt;!&ndash; end pricing-content &ndash;&gt;-->
<!--</section> &lt;!&ndash; end pricing &ndash;&gt;-->

<!--<div th:replace="common/bottom"/>-->
<!--</body>-->
<!--</html>-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:fmt="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/jpetstore.css" type="text/css">
</head>
<body>
<div th:replace="common/top"/>
<div id="Content">
    <section class="pricing" style="height: 900px">

        <div class="col-ten pricing-table">
            <div class="row">
                <div class="col-eleven plan-wrap">
                    <div class="plan-block primary" data-aos="fade-up">
    <div id="Catalog">
        <div class="plan-top-part">
        <h2 th:text="${product.name}"></h2>
        </div>
        <table>
            <tr>
                <th>Item ID</th>
                <th>Product ID</th>
                <th>name</th>
                <th>List Price</th>
                <th></th>
            </tr>
            <tr th:each="item:${items}">
                <td> <a th:href="@{'/catalog/viewItem'(itemId=${item.itemId})}"  th:text="${item.itemId}" ></a></td>
                <td th:text="${product.productId}"></td>
                <td th:text="${product.name}"></td>
                <td th:text="${item.listPrice}"></td>
                <td><a th:href="@{'/cart/addItemToCart'(itemId=${item.itemId})}">Add to Cart</a></td>
            </tr>

        </table>
    </div>
                        <div class="home-scrolldown" ><div class="scroll-icon smoothscroll">
                            <a th:href="@{/catalog/viewCategory(categoryId=${product.categoryId})}"
                               th:text="'Return to '+${product.categoryId}">Return to Product</a>
                        </div>
</div>
        </div>
            </div>
        </div>
        </div>
    </section>


<div th:replace="common/bottom"/>
</div>
</body>
</html>